@import "../../../../styles/variables";
@import "~bootstrap/scss/mixins";

.sticky {
    position: fixed;
    top: 135px;
    height: calc(100% - 220px);
    overflow-y: scroll;

    @include media-breakpoint-up(sm) {
        width: 224px;
    }

    @include media-breakpoint-up(md) {
        width: 250px;
    }
}

.main {
    min-height: calc(100vh);
}


@media (min-width: 576px) {
    .sidebar {
        max-width: 250px;
        margin-right: 1rem;
    }
}

.incident-icon, .issue-icon {
    width: 3.5rem;
    height: 4rem;
}

.current-rating {
    font-size: 3rem;
    font-weight: $font-weight-medium;
    line-height: 3rem;
}

.max-rating {
    font-size: 1.275rem;
    color: $dark-grey;
    margin-right: 1.5rem;
}

.current-assessment {
    font-size: 1.25rem;
    font-weight: $font-weight-medium;
}

.relative-item {
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}

.issue-commentary {
    padding-left: 3.5rem;
}

.pillar-assessment {
    font-size: $secondary-font-size;
    color: $dark-grey;
    font-weight: $font-weight-medium;
}

.pillar-current-rating {
    font-size: 1.5rem;
    font-weight: $font-weight-medium;
}

.pillar-assessment-text {
    font-size: 1.25rem;
    font-weight: $font-weight-medium;
}

.pillar-max-rating {
    color: $dark-grey;
    font-weight: $font-weight-medium;
}

.issue-item {
    border: none;
}

.news-container {
    max-height: 42rem;
    overflow-y: scroll;
}

.gap-legend, .circle-icon {
    width: 1rem;
    height: 1rem;
    border-radius: 2rem;
    display: inline-block;

    &.gap1 { background-color: #acb0b2; }
    &.gap1 { background-color: #40ae49; }
    &.gap2 { background-color: #e7d600; }
    &.gap3 { background-color: #aa2b31; }
    &.key-issue { background-color: $primary-medium; }
}